﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmOrder.aspx.cs" Inherits="EarringsRecommendationWeb.ConfirmOrder" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Checkout Order</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script src="js/toast.js" type="text/javascript"></script>
    <script src="js/formatmoney.js"></script>
</head>
<body>

    <div class="alert alert-success" role="alert" style="display: none; z-index: 1000; position: absolute; left: 0px; top: 50px;">
        <span>populate alert</span>
    </div>
    <!-- Navigation -->
    <nav id="form-nav-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">
        <!-- /.container -->
    </nav>
    <form runat="server" id="checkoutOrder">
        <!-- Page Content -->
        <div class="container" id="print-area">
        <div class="col-md-12">
            <div class="row">
                
                    <div class="col-md-2 col-xs-2">
                        <img style="width:100px;" src="img/Logo.png" />     
                    </div>
                    <div class="col-md-10 col-xs-6">
                        <p>ร้านมณีสกาย จิวหมูจุ๊บ</p>
                        <p>28/1 ซ.กิจการ ถ.รัชดาภิเษก ดินแดง กรุงเทพฯ 10400</p>
                        <p>เบอร์โทรศัพท์ติดต่อ 02 274 9921 แฟกซ์ 02 274 9922</p>
                    </div>
                
            </div>
            <div class="row">
                <hr>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-6 col-xs-6">
                    
                        <address>
                            <p><b>รายละเอียดผู้สั่งซื้อ</b></p>
                            <div>
                                <label>ชื่อ-นามสกุล</label>
                                <p style="display: inline-block; margin-left: 20px;" id="member-name">member_name</p>
                            </div>
                            <div>
                                <label>อีเมล์</label>
                                <p style="display: inline-block; margin-left: 20px;" id="member-email">email</p>
                            </div>
                            <div>
                                <label>ที่อยู่</label>
                                <p style="display: inline-table; margin-left: 20px;" id="member-address">address</p>
                            </div>

                        </address>
                    
                </div>
                <div class="col-md-6 col-xs-6">
                    <div class="pull-right">
                        <p>รายการสั่งซื้อเลขที่</p>
                        <p id="order_id">XXX</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-12">                
            
                <label>วันที่รับสินค้า :</label>
                <p style="display: inline-block; margin-left: 20px;" id="receive-date"></p>                
            
        </div>
        <div class="col-md-12">
            <p><b>รายการสินค้า</b></p>
            <button type="button" class="btn btn-success hidden-print" id="btn-print">พิมพ์ใบสั่งซื้อ</button>
        </div>
        
        <div class="col-md-12" style="padding-top: 20px;">
            <div class="list-group" id="list-order">
            </div>
        </div>
        </div>
        <!-- /.container -->
        <div class="container">
            <hr>
            <!-- Footer -->
            <footer>
                <div class="row">
                    <div class="col-lg-12">
                        <p>
                            Copyright &copy; Your Website 2015
                        </p>
                    </div>
                </div>
            </footer>
        </div>
        <!-- /.container -->
    </form>
    <iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>
    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript">
        $(document).ready(function () {
            if (typeof EarringsInOrder === 'undefined') return;
            if (typeof qty != 'undefined')
            setTimeout(function () { displayItemQuantity(); }, 1000);
            getReceiveDate();
            buildTable();
            getTotal();

            if (typeof Member === 'undefined' || Member[0] === null) return;

            var member = Member[0][0];
            document.getElementById('member-name').innerHTML = member.Name;
            document.getElementById('member-email').innerHTML = member.Email;
            document.getElementById('member-address').innerHTML = member.Address;
            document.getElementById('order_id').innerHTML = orderid[0];
        });

        function getReceiveDate() {
            var receivedate = ReceiveDate[0][1];
            $('#receive-date').html(receivedate);
        }

        function buildTable() {

            var array = EarringsInOrder[0];
            var element = '';
            for (var i = 0; i < array.length; i++) {

                element += '<a href="#" class="list-group-item" style="width: 100%;">';
                element += '    <div class="panel-body">';
                element += '        <div class="col-md-2 col-xs-3">';
                element += '            <img src="' + array[i].imgPath + '" class="media-object thumbnail" style="width: 120px;">';                
                element += '        </div>';
                element += '        <div class="col-md-3 col-xs-3">';
                element += '            <h4 class="list-group-item-heading">' + array[i].er_name + '</h4>';
                element += '            <p class="list-group-item-text" value="' + array[i].er_price + '" id="price-' + array[i].er_code + '">ราคา ' + Number(array[i].er_price).formatMoney() + ' บาท</p>';
                element += '            <p class="list-group-item-text">' + array[i].er_detail + '</p>';
                element += '        </div>';
                element += '        <div class="col-md-3 col-xs-2">';
                element += '            <div class="input-group">';
                element += '              <span>จำนวน&nbsp;&nbsp;</span>';
                element += '              <span id="qty-' + array[i].er_code + '">' + array[i].er_qty + '</span>';
                element += '            </div>';
                element += '        </div>';
                //element += '        <div class="col-md-2">';
                //element += '            <p class="form-control-static">ราคารวม</p>';
                //element += '        </div>';
                element += '        <div class="col-md-3 col-xs-4">';
                element += '            <p class="pull-right" id="total-' + array[i].er_code + '">รวม ' + Number(array[i].er_qty * array[i].er_price).formatMoney() + ' บาท</p>';
                element += '        </div>';
                element += '    </div>';
                element += '</a>';
            }

            var list = document.getElementById('list-order');
            list.innerHTML = '';
            list.innerHTML = element;

            for (var i = 0; i < array.length; i++) {
                var code = array[i].er_code;
                document.getElementById('qty-' + code).addEventListener('change', function () {
                    var controlId = this.id.split('-')[1] + '-' + this.id.split('-')[2];
                    document.getElementById('total-' + controlId).innerHTML = Number(this.value * document.getElementById('price-' + controlId).getAttribute('value')).formatMoney();
                });
            }
        }

        function getTotal() {
            var array = EarringsInOrder[0];
            var temp = 0;
            var earringsArray = [];
            for (var i = 0; i < array.length; i++) {
                var objEarrings = { ERCode: '', Qty: 0 };

                var code = array[i].er_code;

                objEarrings.ERCode = code;

                var pPrice = document.getElementById('price-' + code);
                var price = 0;
                if (pPrice) {
                    price = parseFloat(pPrice.getAttribute('value'));
                    var quantity = parseInt($('#qty-' + code).html());
                    temp += price * quantity;

                    objEarrings.Qty = quantity;
                }

                earringsArray.push(objEarrings);
            }

            var beforeVat = temp * 100 / 107;
            var vatAmt = temp - beforeVat;
            var element = '';
            element += '<a href="#" class="list-group-item" style="width: 100%;" id="grand-total">';
            element += '    <div class="panel-body">';
            element += '        <div class="col-md-2">';
            element += '        </div>';
            element += '        <div class="col-md-3">';
            element += '        </div>';
            element += '        <div class="col-md-3">';
            element += '        </div>';
            element += '        <div class="col-md-3">';            
            element += '            <p class="form-control-static pull-right" id="txt-grand-total">รวมทั้งสิ้น ' + Number(temp).formatMoney() + ' บาท' + '</p>';
            element += '           <br><br><p class="pull-right">Vat 7% (Incl.) ' + Number(vatAmt).formatMoney() + ' บาท' + '</p>';
            element += '        </div>';
            element += '    </div>';
            element += '</a>';

            var grandTotal = document.getElementById('grand-total');
            if (!grandTotal) {
                var list = document.getElementById('list-order');
                list.innerHTML += element;
            } else {
                $('#txt-grand-total').html(Number(temp).formatMoney() + ' บาท');
            }
        }        
       
        var btnPrint = document.getElementById('btn-print');
        btnPrint.onclick = function () {
            var content = document.getElementById('print-area');
            var pri = document.getElementById('ifmcontentstoprint').contentWindow;
            var myStyle = '<html><div style="font-size: 16px;">';
            var myCss = '';
            myCss += '<style type="text/css">';
            myCss += '@media print {';
            myCss += '.no-print { display:none; }';
            myCss += '}';
            myCss += '</style><link href="css/bootstrap.css" rel="stylesheet"><link href="css/bootstrap-theme.css" rel="stylesheet" />';

            var body = myStyle + myCss + content.innerHTML + '</div></html>';
            pri.document.open();
            pri.document.write(body);
            pri.document.close();
            pri.focus();
            pri.print();
        }

    </script>
</body>
</html>
